<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('部门详情')">
	<meta charset="UTF-8">
</head>
<body>
<div id="dataDiv" style="margin-left: 10px; margin-right: 10px;">
	<div style="width: 100%; height: 30px; border-bottom: solid 1px;">
		<div :style="{'backgroundColor': (openIndex == 1 ? '#fff': '#F1F1F1')}" style="width: 20%; height: 26px; cursor: pointer; margin-top: 2px; margin-bottom: 2px; padding-top: 3px; text-align: center; float: left; border: solid 1px #E4F6E5;" @click="openIndex = 1">
			<font style="font-size: 17px; font-family: '宋体';">基本信息</font>
		</div>
		<div :style="{'backgroundColor': (openIndex == 2 ? '#fff': '#F1F1F1')}" style="width: 20%; height: 26px; cursor: pointer; margin-top: 2px; margin-bottom: 2px; padding-top: 3px; text-align: center; float: left; margin-left: 5px; border: solid 1px #E4F6E5;" @click="openIndex = 2">
			<font style="font-size: 17px; font-family: '宋体';">授权信息</font>
		</div>
		<div :style="{'backgroundColor': (openIndex == 3 ? '#fff': '#F1F1F1')}" style="width: 20%; height: 26px; cursor: pointer; margin-top: 2px; margin-bottom: 2px; padding-top: 3px; text-align: center; float: left; margin-left: 5px; border: solid 1px #E4F6E5;" @click="openIndex = 3">
			<font style="font-size: 17px; font-family: '宋体';">人员信息</font>
		</div>
	</div>
	<div v-show="openIndex == 1" style="width: 100%; margin-top: 20px;">
		<div style="width: 100%; font-family: '宋体'; font-size: 18px;">
			<div style="width: 100%; float: left;">
				<div style="width: 200px; float: left; line-height: 30px;"><font>部门唯一标识:</font></div>
				<div style="float: left; line-height: 30px;"><font>{{modelData.id}}</font></div>
			</div>
			<div style="width: 100%; float: left; margin-top: 8px;">
				<div style="width: 200px; float: left; line-height: 30px;"><font>部门名称:</font></div>
				<div style="float: left; line-height: 30px;"><font>{{modelData.name}}</font></div>
			</div>
			<div style="width: 100%; float: left; margin-top: 8px;">
				<div style="width: 200px; float: left; line-height: 30px;"><font>部门名称（英文）:</font></div>
				<div style="float: left; line-height: 30px;"><font>{{modelData.enName}}</font></div>
			</div>
			<div style="width: 100%; float: left; margin-top: 8px;">
				<div style="width: 200px; float: left; line-height: 30px;"><font>部门代码:</font></div>
				<div style="float: left; line-height: 30px;"><font>{{modelData.code}}</font></div>
			</div>
		</div>
	</div>
	<div v-show="openIndex == 2" style="width: 100%; margin-top: 20px;">
		<div class="listDataTableStyle">
			<table style="width: 90%; margin-left: 5%;">
				<tr>
					<th>序号</th>
					<th>唯一标识</th>
					<th>部门角色名称</th>
					<th>部门角色名称(英文)</th>
				</tr>
				<tr v-for="(data, index) in modelData.roleDtos" v-show="modelData.roleDtos != null && modelData.roleDtos.length != 0">
					<td>{{index + 1}}</td>
					<td>{{data.id}}</td>
					<td>{{data.name}}</td>
					<td>{{data.enName}}</td>
				</tr>
				<tr v-show="modelData.roleDtos == null || modelData.roleDtos.length == 0">
					<td colspan="4">暂无分配角色</td>
				</tr>
			</table>
		</div>
	</div>
	<div v-show="openIndex == 3" style="width: 100%; margin-top: 20px;">
		<div class="listDataTableStyle">
			<table style="width: 90%; margin-left: 5%;">
				<tr>
					<th>序号</th>
					<th>唯一标识</th>
					<th>人员名称</th>
					<th>人员名称(英文)</th>
				</tr>
				<tr v-for="(data, index) in modelData.personDtos" v-show="modelData.personDtos != null && modelData.personDtos.length != 0">
					<td>{{index + 1}}</td>
					<td>{{data.id}}</td>
					<td>{{data.name}}</td>
					<td>{{data.enName}}</td>
				</tr>
				<tr v-show="modelData.personDtos == null || modelData.personDtos.length == 0">
					<td colspan="4">暂无部门下的人员</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- <div style="width: 100%; position:fixed; bottom: 0; border-top: solid 1px; margin-bottom: 10px; padding-top: 3px;">
		<button class="btn btn-warning" style="width: 120px;">修改</button>
	</div> -->
</div>
<!-- js引入 -->
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript" th:inline="javascript">
const id = [[${id}]];
const BASE_PATH = [[@{/}]];
const URLS = {
	API_URLS: {
		GET: BASE_PATH + 'v1/restful/department/getWithAllById/'+id
	}
};
var reqLayerIndex = -1;
axios.interceptors.request.use(function (config) {
	reqLayerIndex = layer.load();
	return config;
}, function (error) {
	return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
	layer.close(reqLayerIndex);
	return response;
}, function (error) {
	return Promise.reject(error.response);
});
var app = new Vue({
	el: '#dataDiv',
	data: {
		modelData: {},
		openIndex: 1
	},
	methods: {
		init: function() {
			axios.get(URLS.API_URLS.GET)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					app.modelData = data;
				}
			}).catch(function (error) {
			});
		}
	},
	mounted: function() {
		this.init();
	}
});
</script>
</html>